<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <title>购买记录</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style media="screen">
        .info-head {
            height: 1.8rem;
            line-height: 1.8rem;
            text-align: center;
            background: #F2F2F2
        }

        .people-img {
            height: 1.8rem;
            width: 1.8rem;
            margin-right: .4rem;
            border-radius: 50%
        }

        .people-item {
            height: 1.8rem;
            margin: .6rem .6rem 0 .6rem
        }

        body {
            padding: 0;
            margin: 0;
            background: #fff
        }
    </style>
</head>

<body>
    <section class='font-12 text-color-3'>
        <div class="info-head">
            目前共121人参与购买，商品共销售4654份
        </div>
        <div style="padding:0 0.6rem" id='app'>
            <div class='people-item flex-center-between' v-for='item in people'>
                <div class="flex-align-center">
                    <img class='people-img' src="../image/gril.jpg" alt="">
                    <div>
                        {{item.name}}
                    </div>
                </div>
                <div><span class="red-text">{{item.num}}</span>份</div>
                <div>{{item.time}}</div>
            </div>
        </div>
    </section>
</body>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            people: [{
                name: '张三',
                num: '45',
                time: '2019-10-10'
            }, {
                name: '王二',
                num: '11',
                time: '2018-10-10'
            }, {
                name: '李四',
                num: '22',
                time: '2019-11-10'
            }]
        }
    })
</script>

</html>
